<template>
  <div class='box'>
        <div class="body">
            <el-row>
        <el-col :span="4" class="el_col">
          <div class="grid-content bg-purple">
            <span>标签名称</span>
            <el-input
              v-model="renderObj.tagName"
              placeholder="请输入内容"
              class="input"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class=" bg-purple-light">
            <span>状态</span>
            <el-select v-model="renderObj.state" placeholder="请选择">
            <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label">
      </el-option>
    </el-select>
              <el-button @click="removeInput" >清空</el-button>
          <el-button class="btn2" @click="searchKeyWords" >搜索</el-button>
          </div>
        </el-col>
        <el-col :span="8" class="el_colright">
          <div class=" bg-purple">
            <el-button type="primary" icon="el-icon-edit" @click="addDirectory"
              >新增学科</el-button
            >
          </div></el-col
        >
      </el-row>

    <headerVue :title="counts" />

          <el-table
      :data="renderList"
      style="width: 100%">
    <el-table-column
      type="index"
      label="序号">
    </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        >

      </el-table-column>
                         <el-table-column
        prop="tagName"
        label="标签名称">

      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
           <el-table-column
        prop="addDate"
        label="创建日期">

      </el-table-column>
                <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
                <el-table-column
        prop="state"
        label="状态">
          <template #default="{row}">
            <span>{{ row.state===1?'已启用':'已禁用' }}</span>
          </template>
      </el-table-column>
  <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template #default="{ row }" >

        <el-button type="text" size="small"  @click="changeState(row)" >{{row.state?'已启用':'已禁用'}}</el-button>
        <el-button type="text" size="small" :disabled="row.state?true:false"  @click="editDirectory(row.id)" >修改</el-button>
        <el-button type="text" size="small" :disabled="row.state?true:row.totals?true:false" @click="delSubject(row.id)">删除 </el-button>

      </template>
    </el-table-column>

    </el-table>
    <PageTool :total="counts" :paginationPage="renderObj.page" :paginationPagesize="renderObj.pagesize" @pageChange="pageChange" @changSize="onPageSizeChange" />

    </div>
<commonAddVue ref="commonAddVue" @changeDirectory="changeDirectory" :title="title" />
  </div>
</template>

<script>
import headerVue from '@/module-manage/components/header'
import PageTool from '@/module-manage/components/page-tool'
import { list, add, update, remove, changeState } from '@/api/hmmm/tags.js'
import commonAddVue from '@/module-hmmm/components/common_add'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    headerVue, PageTool, commonAddVue
  },
  data () {
    return {
      renderList: [],
      counts: null,
      renderObj: {
        page: 1,
        pagesize: 10,
        state: null,
        tagName: ''
      },
      stateList: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }],
      title: '新增标签'
    }
  },
  created () {
    this.getrenderList()
  },
  methods: {
    async getrenderList () {
      const { data } = await list(this.renderObj)
      this.renderList = [...data.items]
      console.log(this.renderList)
      this.renderList.forEach(item => { item.addDate = parseTime(item.addDate) })
      this.counts = data.counts
    },
    async searchKeyWords () {
      console.log(1)
      if (this.renderObj.tagName || this.renderObj.state === 1 || this.renderObj.state === 0) {
        this.getrenderList()
      }
    },
    removeInput () {
      this.renderObj = {
        page: 1,
        pagesize: 10,
        state: null,
        directoryName: ''
      }
      this.getrenderList()
    },
    addDirectory () {
      this.$refs.commonAddVue.flag = false
      this.$refs.commonAddVue.openDialog()
    },
    async changeDirectory (form) {
      if (!form.id) {
        await add(form)
      } else {
        await update(form)
      }
      this.getrenderList()
      this.$refs.commonAddVue.closeDialog()
    },
    async editDirectory (id) {
      this.title = '修改标签'
      this.$refs.commonAddVue.flag = false
      this.$refs.commonAddVue.geteditList(id)
    },
    async delSubject (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.getrenderList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    pageChange (val) {
      this.renderObj.page = val
      this.getrenderList()
    },
    onPageSizeChange (val) {
      this.renderObj.pagesize = val
      this.getrenderList()
    },
    async changeState (row) {
      await changeState({ id: row.id, state: row.state ? 0 : 1 })
      this.getrenderList()
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
    span{
    font-size: 14px;
    font-weight: 600;

  }
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
  display: flex;
  align-items: center;
      span{
    font-size: 14px;
    font-weight: 600;
  }
  /deep/.el-select{
    margin:0 10px;
  }
   button {
    width: 56px;
    height: 35.99px;
    font-size: 12px;
    margin-left: 15px;
    text-align: center;
    padding: 0;
  }
  .btn2 {
    background-color: #409eff;
    color: #fff;
  }
}
.input {
  width: 200px;
   margin-left: 10px;
}
.el_col {
  display: flex;
}
.el_colright {
  display: flex;
  justify-content: flex-end;
  button {
    font-size: 12px;
    width: 97px;
    background-color: #67c23a;
    padding: 9px 15px 9px 15px;
  }
}
</style>
